<!DOCTYPE html>
<html>
<head>
    <title>Oscillator Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General styling
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.font = '20px Arial';
        ctx.fillStyle = 'black';

        // --- Define coordinates for a scalable and centered drawing ---
        const cx = canvas.width / 2;
        const groundY = 380;
        
        const oscillatorWidth = 150;
        const oscillatorHeight = 80;
        const oscillatorX = cx - oscillatorWidth / 2;
        const oscillatorY = groundY - oscillatorHeight;

        const shaftWidth = 30;
        const shaftHeight = 70;
        const shaftX = cx - shaftWidth / 2;
        const shaftY = oscillatorY - shaftHeight;

        const plateWidth = 340;
        const plateHeight = 20;
        const plateX = cx - plateWidth / 2;
        const plateY = shaftY - plateHeight;

        // --- Draw Ground ---
        ctx.beginPath();
        ctx.moveTo(50, groundY);
        ctx.lineTo(550, groundY);
        ctx.stroke();

        // Draw ground hatches
        ctx.lineWidth = 1;
        for (let i = 50; i < 550; i += 20) {
            ctx.beginPath();
            ctx.moveTo(i, groundY);
            ctx.lineTo(i - 15, groundY + 15);
            ctx.stroke();
        }
        ctx.lineWidth = 2; // Reset line width

        // --- Draw Oscillator ---
        ctx.fillStyle = '#cccccc'; // Light grey fill
        ctx.fillRect(oscillatorX, oscillatorY, oscillatorWidth, oscillatorHeight);
        ctx.strokeRect(oscillatorX, oscillatorY, oscillatorWidth, oscillatorHeight);
        ctx.fillStyle = 'black'; // Reset fill color

        // --- Draw Plate and Shaft (as a single T-shape outline) ---
        ctx.beginPath();
        ctx.moveTo(plateX, plateY); // top-left of plate
        ctx.lineTo(plateX + plateWidth, plateY); // top-right of plate
        ctx.lineTo(plateX + plateWidth, plateY + plateHeight); // bottom-right of plate
        ctx.lineTo(shaftX + shaftWidth, shaftY); // top-right corner of shaft connection
        ctx.lineTo(shaftX + shaftWidth, shaftY + shaftHeight); // bottom-right of shaft
        ctx.lineTo(shaftX, shaftY + shaftHeight); // bottom-left of shaft
        ctx.lineTo(shaftX, shaftY); // top-left corner of shaft connection
        ctx.lineTo(plateX, plateY + plateHeight); // bottom-left of plate
        ctx.closePath();
        ctx.stroke();

        // --- Draw Sand ---
        ctx.fillStyle = 'black';
        const sandRadius = 2.5;
        const sandY = plateY - sandRadius;
        for (let x = plateX + 10; x < plateX + plateWidth - 10; x += sandRadius * 2.2) {
            ctx.beginPath();
            ctx.arc(x, sandY, sandRadius, 0, 2 * Math.PI);
            ctx.fill();
        }
        
        // --- Draw Labels and Pointers ---
        ctx.textAlign = 'left';
        
        // Label: sand
        ctx.fillText('sand', 480, 150);
        ctx.beginPath();
        ctx.moveTo(475, 155);
        ctx.lineTo(410, 205);
        ctx.stroke();

        // Label: plate
        ctx.fillText('plate', 480, 230);
        ctx.beginPath();
        ctx.moveTo(475, 230);
        ctx.lineTo(plateX + plateWidth, 230);
        ctx.stroke();

        // Label: oscillator
        ctx.fillText('oscillator', 480, 310);
        ctx.beginPath();
        ctx.moveTo(475, 310);
        ctx.lineTo(oscillatorX + oscillatorWidth, 310);
        ctx.stroke();

        // Label: direction of oscillations
        ctx.textAlign = 'center';
        ctx.fillText('direction of', 120, 210);
        ctx.fillText('oscillations', 120, 235);

        // Arrow for oscillations
        const arrowX = 185;
        const arrowY1 = 200;
        const arrowY2 = 245;
        const arrowheadSize = 8;
        ctx.beginPath();
        ctx.moveTo(arrowX, arrowY1);
        ctx.lineTo(arrowX, arrowY2);
        // Top arrowhead
        ctx.moveTo(arrowX, arrowY1);
        ctx.lineTo(arrowX - arrowheadSize / 2, arrowY1 + arrowheadSize);
        ctx.moveTo(arrowX, arrowY1);
        ctx.lineTo(arrowX + arrowheadSize / 2, arrowY1 + arrowheadSize);
        // Bottom arrowhead
        ctx.moveTo(arrowX, arrowY2);
        ctx.lineTo(arrowX - arrowheadSize / 2, arrowY2 - arrowheadSize);
        ctx.moveTo(arrowX, arrowY2);
        ctx.lineTo(arrowX + arrowheadSize / 2, arrowY2 - arrowheadSize);
        ctx.stroke();

        // --- Draw Figure Caption ---
        ctx.font = 'bold 20px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 2.1', cx, groundY + 45);

    </script>
</body>
</html>